<template>
  <div>
    <van-nav-bar
      fixed
      class="link"
      title="发布房源"
      left-arrow
      @click-left="backFn"
    ></van-nav-bar>
    <div class="add-title">
      <p>房源信息</p>
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-cell
          title="小区名称"
          right-icon="arrow"
          is-link
          :value="communityName"
          @click="$router.push('/search')"
        >
        </van-cell>
        <van-field
          v-model="form.price"
          label="租金"
          placeholder="请输入租金/月"
        >
          <template #button>
            <span>¥ /月</span>
          </template>
        </van-field>
        <van-field
          v-model="form.size"
          label="建筑面积"
          placeholder="请输入建筑面积"
        >
          <template #button>
            <span>m²</span>
          </template>
        </van-field>
        <!-- 户型 楼层 朝向 -->
        <div>
          <van-cell
            title="户型"
            is-link
            :value="roomType"
            @click="getValueFn('roomType')"
          >
          </van-cell>
          <van-cell
            title="所在楼层"
            is-link
            :value="floor"
            @click="getValueFn('floor')"
          />
          <van-cell
            title="朝向"
            is-link
            :value="oriented"
            @click="getValueFn('oriented')"
          />
          <van-popup
            v-model="showPicker1"
            position="bottom"
            :style="{ height: '45%' }"
          >
            <van-picker
              show-toolbar
              :columns="columns1"
              @confirm="onConfirm1"
              @cancel="showPicker1 = false"
            />
          </van-popup>
          <van-popup
            v-model="showPicker2"
            position="bottom"
            :style="{ height: '45%' }"
          >
            <van-picker
              show-toolbar
              :columns="columns2"
              @confirm="onConfirm2"
              @cancel="showPicker2 = false"
            />
          </van-popup>
          <van-popup
            v-model="showPicker3"
            position="bottom"
            :style="{ height: '45%' }"
          >
            <van-picker
              show-toolbar
              :columns="columns3"
              @confirm="onConfirm3"
              @cancel="showPicker3 = false"
            />
          </van-popup>
        </div>

        <!-- 房屋标题 -->
        <p>房屋标题</p>
        <van-divider />
        <van-field
          v-model="form.title"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        />
        <!-- 图像上传 -->
        <p>房屋图像</p>
        <van-divider />
        <van-uploader
          preview-image
          upload-icon="plus"
          :after-read="afterRead"
          v-model="fileList"
        />
        <!-- 房屋配置 -->
        <p>房屋配置</p>
        <van-divider />
        <van-grid :border="false" :column-num="5">
          <van-grid-item
            v-for="(item, index) in supporting"
            :key="index"
            icon="fire-o"
            :text="item.label"
            :class="{ active: selectArr.indexOf(item.label) !== -1 }"
            @click="getSupporting(item.label)"
          />
        </van-grid>
        <!-- 房屋描述 -->
        <p>房屋描述</p>
        <van-divider />
        <van-field
          v-model="form.description"
          rows="5"
          autosize
          type="textarea"
          placeholder="请输入房屋描述信息"
          show-word-limit
        />

        <!-- 底部 -->
        <div class="hfooter"></div>
        <div class="footer">
          <van-button class="left" type="info" native-type="button"
            >取消</van-button
          >
          <van-button class="right" type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script>
// import { addHouseList, uploadImg } from '@/api/house'
import { houseCondition } from '@/api/house'
import { updateHouse } from '@/api/user'
import { uploadImg } from '@/api/plugin'
export default {
  data () {
    return {
      isTrue: false,
      roomTypeColumns: [],
      floorColumns: [],
      orientedColumns: [],
      roomType: '请选择',
      floor: '请选择',
      oriented: '请选择',
      columns1: [],
      columns2: [],
      columns3: [],
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      supporting: [],
      fileList: [],
      selectArr: [],
      form: {
        price: '',
        size: '',
        title: '',
        supporting: '',
        description: '',
        houseImg: '',
        roomType: '',
        floor: '',
        oriented: '',
        community: ''
      }
    }
  },
  watch: {
    selectArr: {
      handler () {
        this.form.supporting = this.selectArr.join('|')
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    communityName () {
      if (localStorage.getItem('communityName')) {
        return localStorage.getItem('communityName')
      } else {
        return '请输入小区名称'
      }
    }
  },
  async created () {
    const res = await houseCondition()
    // console.log(res)
    this.floorColumns = res.body.floor
    this.orientedColumns = res.body.oriented
    this.roomTypeColumns = res.body.roomType
    this.supporting = res.body.supporting
  },
  methods: {
    async onSubmit () {
      const res = await updateHouse(this.form)
      console.log(res)
    },
    backFn () {
      this.$router.push('/home')
      localStorage.removeItem('communityName')
    },
    onConfirm1 (value) {
      console.log(value)
      console.log(value.substring(0, 5))
      this.roomTypeColumns.forEach((item) => {
        if (item.label === value) {
          this.form.roomType = item.value
        }
      })
      this.roomType = value
      this.showPicker1 = false
    },
    onConfirm2 (value) {
      this.floorColumns.forEach((item) => {
        if (item.label === value) {
          this.form.floor = item.value
        }
      })
      this.floor = value
      this.showPicker2 = false
    },
    onConfirm3 (value) {
      this.orientedColumns.forEach((item) => {
        if (item.label === value) {
          this.form.oriented = item.value
        }
      })
      this.oriented = value
      this.showPicker3 = false
    },
    getValueFn (event) {
      this.isShow = true
      console.log(event)
      if (event === 'roomType') {
        this.showPicker1 = true
        this.columns1 = this.roomTypeColumns.map((item) => {
          return item.label
        })
      } else if (event === 'floor') {
        this.showPicker2 = true
        this.columns2 = this.floorColumns.map((item) => {
          return item.label
        })
      } else {
        this.showPicker3 = true
        this.columns3 = this.orientedColumns.map((item) => {
          return item.label
        })
      }
    },
    getSupporting (val) {
      console.log(val)
      const index = this.selectArr.indexOf(val)
      if (index !== -1) {
        this.selectArr.splice(index, 1)
      } else {
        this.selectArr.push(val)
      }
      // e.target.classList.toggle('active')
    },

    async afterRead (e) {
      // console.log(e)
      const data = new FormData()
      data.set('file', e.file)

      const res = await uploadImg(data)
      console.log(res)
      console.log(res.body)
      console.log(this.fileList)
      this.form.houseImg = this.fileList[0].file.type
      console.log(this.form.houseImg)
    }
  }
}
</script>

<style lang="less" scoped>
.active {
  color: #21b97a !important;
  ::v-deep .van-icon,
  .van-icon-fire-o,
  .van-grid-item__icon {
    color: #21b97a !important;
  }
  ::v-deep .van-grid-item__text {
    color: #21b97a !important;
  }
}
.link {
  background-color: #21b97a;
}
::v-deep .van-nav-bar__title,
.van-ellipsis {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}
::v-deep .van-icon-arrow-left {
  color: #fff !important;
}
::v-deep .van-icon,
.van-icon-arrow {
  color: #ccc;
}
p {
  color: #333;
  font-size: 14px;
  padding-left: 16px;
}
.add-title {
  margin-top: 60px;
}
.add-title p {
  color: #21b97a;
  font-size: 15px;
  padding: 0 0 0 16px;
}
::v-deep .van-uploader__upload {
  margin-left: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
}

::v-deep .van-grid-item {
  margin: 0;
  padding: 0;
}
::v-deep .van-grid-item__icon {
  color: #333;
}
::v-deep .van-grid-item__text {
  margin-top: 0;
  color: #333;
  font-size: 14px;
}
.hfooter {
  height: 44px;
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .left {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50%;
  border: none;
  background-color: #fff;
  color: #21b97a;
  z-index: 99;
}
.footer .right {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50%;
  border: none;
  z-index: 99;
}
</style>
